<template>
  <div class="page">
    <div class="goods_img">
      <img :src="result.pgrpItems.picUrl" mode="widthFix">
    </div>
    <div class="goods_base">
      <div class="goods_base_title">{{result.pgrpItems.itemName}}</div>
      <div class="weui-flex goods_base_price">
        <div class="weui-flex__item">
          <span class="price_now">￥{{result.pgrpItems.grpAmount*0.01}}</span>
          <span class="price_old">¥{{result.pgrpItems.itemPrice*0.01}}</span>
        </div>
        <div class="grey">已团{{result.pgrpItems.grpQty}}件</div>
      </div>
      <div class="goods_base_des">{{result.pgrpItems.itemSpec}}</div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">拼团玩法</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd group_rule">
          <div class="group_rule_txt">支付开通并邀请2人参团</div>
          <div class="weui-flex">
            <div class="weui-flex__item group_rule_item">
              <img src="../../../static/images/ic_pt.png" mode="widthFix">
              <p>拼团或参团</p>
            </div>
             <div class="weui-flex__item group_rule_item">
              <img src="../../../static/images/ic_fk.png" mode="widthFix">
              <p>付款</p>
            </div>
             <div class="weui-flex__item group_rule_item">
              <img src="../../../static/images/ic_yqhy.png" mode="widthFix">
              <p>邀请好友</p>
            </div>
             <div class="weui-flex__item group_rule_item">
              <img src="../../../static/images/ic_cg.png" mode="widthFix">
              <p>拼团成功</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd group_user_header">以下小伙伴正在发起拼团，您可以直接参与</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd group_user">
          <template v-if="result.pgrpOrder.length">
          <div class="weui-flex group_user_item" v-for="item in result.pgrpOrder">
            <img :src="item.images" mode="widthFix">
            <div class="group_user_name">{{item.grpName||''}}</div>
            <div class="weui-flex__item">
              <p>还差 <span class="red">{{item.grpMaxMembers}} </span>人成团</p>
              <p class="grey">剩余{{item.setInterTime}}</p>
            </div>
            <a class="group_user_btn" @click="tPayCan(item)">去拼团</a>
          </div>
          </template>
           <div class="weui-flex group_user_item" v-else style="font-size: 0.8em;">
             暂无拼团
             </div>
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">详情</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd group_content">
          {{result.marketingActivity.typeDesc}}
        </div>
      </div>
    </div>
    <div class="footer weui-flex">
      <div class="homelink">
        <img src="../../../static/images/ic_home.png">
        <p @click="goHome">首页</p>
      </div>
      <div class="weui-flex__item footer_btn">
        <a @click="alinePay()" class="footer_btn_alone">单独购买</a>
        <a @click="tPay()"  class="footer_btn_group">¥{{result.pgrpItems.grpAmount*0.01}}(2人成团)</a>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      arr:[],
      result:{
        pgrpOrder:[],

      }
    }
  },
  onLoad(id){
    this.id=id.id;
  },
  onShow(){
    this.arr=[]
    wx.setNavigationBarTitle({
      title: "拼团详情"
    })

    this.timer=setInterval(()=>{
      this.getDetail()
    },1000)

      // this.$nextTick(()=>{
      //   this.showtime()
      // })


  },
  onUnload(){
    clearInterval( this.timer)
  },
  onHide(){
    clearInterval( this.timer)
  },
  onReady(){

  },
  methods: {
    setIntervalShowTIme(date){


    },
    showtime  (data) {
    //setInterval(()=>{

     data.pgrpOrder.forEach((a,i)=>{
     //   console.log(a.endTime)
        var nowtime = new Date(),  //获取当前时间
          endtime = new Date();  //定义结束时间
        var lefttime =a.endTime - nowtime.getTime(),  //距离结束时间的毫秒数
          leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
          lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
          leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
          lefts = Math.floor(lefttime/1000%60);  //计算秒数
        a.setInterTime=lefth + ":" + leftm + ":" + lefts;

      })
      this.result=data;
    //  console.log(this.result.pgrpOrder)
      //  return   //返回倒计时的字符串
  //   },1000)

    },
    alinePay(){//单独购买
       wx.setStorageSync('productDetail',JSON.stringify(this.result))
        wx.setStorageSync('isTuangou',0)
         wx.setStorageSync('payShow',JSON.stringify(this.arr))
        wx.navigateTo({ url:"/pages/commit/main"})
    },
    tPayCan(item){
      wx.setStorageSync('productDetail',JSON.stringify(this.result))
      wx.setStorageSync('isTuangou',1)
      wx.setStorageSync('tStatus',2)//开团
      console.log(this.arr)
      wx.setStorageSync('payShow',JSON.stringify(this.arr))
      // pgrpItems
      wx.navigateTo({ url:`/pages/commit/main?id=${JSON.stringify(item)}`})
    },
      tPay(){
      wx.setStorageSync('productDetail',JSON.stringify(this.result))
         wx.setStorageSync('isTuangou',1)
          wx.setStorageSync('tStatus',1)//开团
          console.log(this.arr)
            wx.setStorageSync('payShow',JSON.stringify(this.arr))
          // pgrpItems
        wx.navigateTo({ url:"/pages/commit/main"})
    },
     goHome(){
      let url="/pages/index/index";
      // wx.setStorageSync('AppleAssembleList', JSON.stringify(row))
       mpvue.switchTab({ url })
    },
    getDetail(){
      let that=this;
      this.$http.request({
        method: "post",
        url: "/v1.0/appletHome/appletAssembleDetail",
        body: {
        id:that.id,
          status:'20'
        }
      }).then((data)=>{
        if(data.code==0){
          // that.result=data.result||{};
          that.showtime(data.result||{})
         // console.log(this.pgrpOrder)
          that.arr.push(that.result.pgrpItems)
        }else{
          wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.page{
  padding-bottom: 3.5em;
}
.goods_img img{
  width: 100%;
}
.goods_base{
  background: #fff;
  padding: 0.8em;
}
.goods_base_title{
  font-size: 0.9em;
}
.goods_base_price{
  font-size: 0.8em;
}
.goods_base_price .price_now{
  color: #E4393C;
  font-size: 1.1em;
  padding-right: 0.4em;
}
.goods_base_price .price_old{
  color: #999;
  text-decoration: line-through;
  font-size: 0.9em;
}
.goods_base_price .grey{
  width: 6em;
  border-left: 1px #eee solid;
  text-align: right;
}
.goods_base_des{
  font-size: 0.8em;
  color: #999;
}
.group_rule .group_rule_txt{
  font-size: 0.8em;
}
.group_rule .group_rule_item{
  text-align: center;
  font-size: 0.8em;
  color: #666;
  padding:0.6em 0;
}
.group_rule .group_rule_item img{
  width: 50%;
}
.group_user_header{
  font-size: 0.8em;
}
.group_user_item{
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.group_user_item img{
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin-right: 0.4em;
}
.group_user_item .weui-flex__item{
  text-align: center;
  font-size: 0.8em;
}
.group_user_item .group_user_btn{
  background: #FF787E;
  width: 4em;
  height: 1.6em;
  text-align: center;
  display: block;
  line-height: 1.6em;
  border-radius: 0.8em;
  color: #fff;
  font-size: 0.8em;
}
.footer{
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 9999;
  right: 0px;
  background: #fff;
  padding: 0.6em;
  border-top: 1px #eee solid;
}
.footer .homelink{
  text-align: center;
  font-size: 0.7em;
  width: 5em;
  line-height: 1em;
  color: #999;
}
.footer .homelink img{
  width: 1.6em;
  height: 1.6em;
}
.footer .footer_btn a{
  float: left;
  width: 50%;
  height: 2.4em;
  line-height: 2.4em;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
}
.footer .footer_btn .footer_btn_alone{
  background: #FFBB78;
  border-radius: 1.2em 0px 0px 1.2em;
}
.footer .footer_btn .footer_btn_group{
  background: #FF787E;
  border-radius: 0px 1.2em 1.2em 0px;
}
</style>
